<template>
  <div class="industry">
    <div class="head">
      <div class="ift-back" @click="returns"></div>
      <h1>美女</h1>
      <div class="ift-menu" @click="flags"></div>
    </div>
    <van-tabs v-model="active" animated title-active-color="#fc6976">
      <van-tab title="热门推荐">
        <ul class="imgs">
          <li v-for="(item, index) in imgs" :key="index">
            <div>
              <img :src="item.url" alt="" />
            </div>
            <p>{{ item.name }}</p>
          </li>
        </ul>
      </van-tab>
      <van-tab title="最近更新">
        <ul class="imgs">
          <li v-for="(item, index) in imgs" :key="index">
            <div>
              <img :src="item.url" alt="" />
            </div>
            <p>{{ item.name }}</p>
          </li>
        </ul>
      </van-tab>
    </van-tabs>
    <div class="switch" v-show="flag">
      <ul class="Icon">
        <li @click="homePage">
          <div class="image icon-sy"></div>
          首页
        </li>
        <li @click="Ranking">
          <div class="image icon-sj"></div>
          书架
        </li>
        <li @click="classification">
          <div class="image icon-gx"></div>
          更新
        </li>
        <li @click="consulting">
          <div class="image icon-zx"></div>
          咨询
        </li>
        <li @click="images">
          <div class="image icon-tp"></div>
          图片
        </li>
        <li @click="character">
          <div class="image icon-rw"></div>
          人物
        </li>
        <li>
          <div class="image icon-wd" @click="my"></div>
          我的
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      imgs: [
        {
          id: 0,
          url: "https://image.32yx.com/news/pjy3wjxo.jpg",
          name: "国风版《海贼王》，路飞像上海滩霸主，女帝娜美旗袍装娇艳欲滴",
        },
        {
          id: 1,
          url: "https://image.32yx.com/news/pzy8qfq5.jpg",
          name: "斗破苍穹小医仙图片壁纸",
        },
        {
          id: 2,
          url: "https://image.32yx.com/news/qdejvbbh.jpg",
          name: "斗破苍穹漫画萧薰儿图片壁纸",
        },
        {
          id: 3,
          url: "https://image.32yx.com/news/18/408518.jpg",
          name: "网游之近战法师的海报2",
        },
        {
          id: 0,
          url: "https://image.32yx.com/news/pjy3wjxo.jpg",
          name: "国风版《海贼王》，路飞像上海滩霸主，女帝娜美旗袍装娇艳欲滴",
        },
        {
          id: 1,
          url: "https://image.32yx.com/news/pzy8qfq5.jpg",
          name: "斗破苍穹小医仙图片壁纸",
        },
        {
          id: 0,
          url: "https://image.32yx.com/news/pjy3wjxo.jpg",
          name: "国风版《海贼王》，路飞像上海滩霸主，女帝娜美旗袍装娇艳欲滴",
        },
        {
          id: 1,
          url: "https://image.32yx.com/news/pzy8qfq5.jpg",
          name: "斗破苍穹小医仙图片壁纸",
        },
      ],
      flag: false,
    };
  },
  methods: {
    consulting() {
      this.$router.push("/find/consulting");
    },
    images() {
      this.$router.push("/find/image");
    },
    character() {
      this.$router.push("/find/character");
    },
    homePage() {
      this.$router.push("/homePage");
    },
    classification() {
      this.$router.push("/classification");
    },
    Ranking() {
      this.$router.push("/Ranking");
    },
    my() {
      this.$router.push("/my");
    },
    flags() {
      this.flag = !this.flag;
    },
    returns() {
      this.$router.go("-1");
    },
  },
};
</script>

<style lang="less">
.industry {
  .head {
    position: fixed;
    z-index: 1;
    top: 0;
    width: 100%;
    height: 45px;
    background-color: white;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    div {
      width: 45px;
      font-size: 20px;
      color: #fc6976;
    }
    h1 {
      flex: 1;
      font-size: 18px;
      font-weight: 500;
    }
    h2 {
      width: 45px;
      font-size: 14px;
      font-weight: 400;
    }
  }
  .van-tabs__wrap {
    width: 100%;
    background-color: white;
    position: fixed;
    z-index: 1;
    top: 45px;
    .van-tabs__line {
      z-index: 0;
      background-color: #fc6976;
    }
  }
  .imgs {
    padding-top: 100px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    li {
      width: 47%;
      margin-bottom: 4%;
      box-shadow: 0 0 1px #fc6976;
      div {
        display: block;
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        overflow: hidden;
        img {
          position: absolute;
          top: -10%;
          left: 0;
          width: 100%;
        }
      }
      p {
        font-size: 14px;
        height: 40px;
        margin: 4px 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        word-wrap: break-word;
        word-break: break-all;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
  .switch {
    position: fixed;
    top: 45px;
    z-index: 2;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    .Icon {
      background-color: white;
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 2%;
      li {
        width: 25%;
        font-size: 14px;
        margin: 2% 0;
        text-align: center;
        div {
          margin: 1% auto;
          width: 42px;
          height: 42px;
          background-image: url(../../assets/sprite.tabs.f5a3c@2x.png);
          background-size: 450%;
          background-repeat: no-repeat;
        }
        .icon-sy {
          background-image: url(../../assets/咨询.png);
          background-size: 800%;
          background-position: 63% 97%;
        }
        .icon-sj {
          background-position: 100% 48%;
        }
        .icon-gx {
          background-position: 66% 0%;
        }
        .icon-zx {
          background-image: url(../../assets/咨询.png);
          background-size: 800%;
          background-position: 102% -2%;
        }
        .icon-tp {
          background-image: url(../../assets/咨询.png);
          background-size: 800%;
          background-position: 77% 97%;
        }
        .icon-rw {
          background-image: url(../../assets/咨询.png);
          background-size: 800%;
          background-position: 50% 97%;
        }
        .icon-wd {
          background-position: 66% 100%;
        }
      }
    }
  }
}
</style>